<template>
    <div class="header-search-wrap">
        <div class="left-content">
            <el-form :model="formData" inline>
                <el-form-item label="空间">
                    <TenantSelect
                        v-model:value="formData.tenant"/>
                </el-form-item>
                <el-form-item label="品牌">
                    <BrandSelect
                        :tenant="formData.tenant"
                        v-model:value="formData.dtBrand"/>
                </el-form-item>
                <el-form-item label="账号类型">
                    <el-select
                        class="w100"
                        v-model="formData.accountType"
                        placeholder="请选择">
                        <el-option
                            v-for="item in brandTypeList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="意见反馈渠道">
                    <el-select
                        class="w300"
                        multiple
                        v-model="formData.clientIds"
                        placeholder="请选择">
                        <el-option
                            v-for="item in feedBackList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select
                        class="w100"
                        v-model="formData.status"
                        placeholder="请选择">
                        <el-option
                            v-for="item in statusList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="意见反馈时间">
                    <DateRange
                            ref="dateRangeRef"
                            data-type="date"
                            :start-time="formData.startTime"
                            :end-time="formData.endTime"/>
                </el-form-item> -->
            </el-form>
        </div>
        <div class="right-content">
            <el-button type="primary" @click="search">查询</el-button>
            <el-button @click="clear">重置</el-button>
        </div>
    </div>
</template>

<script setup>
import TenantSelect from '@/components/select/tenant-select.vue';
import BrandSelect from '@/components/select/brand-select.vue';
import DateRange from '@/components/date-range.vue';
import { ref, defineEmits, defineExpose, reactive } from 'vue';
import { useStore } from 'vuex';

const store = useStore();

defineExpose({
    getFilterInfo
});

let emit = defineEmits(['search']);

// 项目筛选信息
const formData = reactive({
    tenant: '',
    dtBrand: '',
    accountType: '',
    clientIds: [],
    status: '',
    startTime: '',
    endTime: ''
})

const dateRangeRef = ref(null);

// 空间下拉框数据
const tenantList = ref([]);

// 品牌下拉框数据
const brandList = ref([]);

// 状态下拉框数据
const statusList = ref([
    {
        id: 1,
        name: '待处理'
    },
    {
        id: 3,
        name: '处理中'
    },
    {
        id: 2,
        name: '已处理'
    }
]);

// 品牌类型下拉框数据
const brandTypeList = ref([
    {
        id: 1,
        name: '学生'
    },
    {
        id: 2,
        name: '家长'
    },
    {
        id: 3,
        name: '老师'
    }
])

// 意见反馈渠道下拉框数据
const feedBackList = ref([
    {
        id: 'sanren-student-ios',
        name: '学生端-ios'
    },
    {
        id: 'sanren-student-android',
        name: '学生端-android'
    },
    {
        id: 'sanren-teacher-ios',
        name: '教师端-ios'
    },
    {
        id: 'sanren-teacher-android',
        name: '教师端-android'
    },
    {
        id: 'sanren-teacher-pc',
        name: '教师端-pc'
    },
    {
        id: 'sanren-parent-miniprogram',
        name: '家长端-小程序'
    },
    {
        id: 'sanren-parent-subscription',
        name: '家长端-公众号'
    }
]);

// 搜索
function search () {
    emit('search');
}

// 重置筛选条件
function clear () {
    Object.keys(formData).forEach(key => {
        formData[key] = '';
    })
    // dateRangeRef.value.resetDateRange();
    emit('search');
}

// 获取筛选参数
function getFilterInfo () {
    // let timeInfo = dateRangeRef.value.getDateRange();
    // formData.startTime = timeInfo.startTime;
    // formData.endTime = timeInfo.endTime;

    let newParams = {}
    Object.keys(formData).forEach(key => {
        if (formData[key]) {
            newParams[key] = formData[key];
        }
    })
    delete newParams.tenant;
    return newParams;
}

</script>

<style lang="scss" scoped>
.header-search-wrap {
    display: flex;
    flex-wrap: wrap;
    .left-content {
        flex: 1;
    }
    .right-content {
        width: 132px;
    }
    .w150 {
        width: 150px;
    }
    .w100 {
        width: 100px;
    }
    .w300 {
        width: 300px;
    }
}
</style>